<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addEBookForm" ref="addEBookRef" :rules="addEBookrules">
      <el-form-item
        label="期刊分类"
        prop="typeId"
        :label-width="formLabelWidth"
      >
        <el-select v-model="addEBookForm.typeId" clearable placeholder="请选择期刊分类">
          <el-option
            v-for="item in typeList"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期刊名称" :label-width="formLabelWidth" prop="title">
        <el-input
          v-model="addEBookForm.title"
          autocomplete="off"
          ref="name"
          placeholder="请填写期刊名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="期刊编号" :label-width="formLabelWidth" prop="code">
        <el-input
          v-model="addEBookForm.code"
          autocomplete="off"
          ref="name"
          placeholder="请填写期刊编号"
        ></el-input>
      </el-form-item>


      <el-form-item label="出版社" :label-width="formLabelWidth" prop="press">
        <el-input
          v-model="addEBookForm.press"
          autocomplete="off"
          ref="name"
          placeholder="请填写出版社"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="期刊作者"
        :label-width="formLabelWidth"
        prop="author"
      >
        <el-input
          v-model="addEBookForm.author"
          autocomplete="off"
          ref="name"
          placeholder="请填写期刊作者"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="期刊介绍"
        :label-width="formLabelWidth"
        prop="content"
        v-if="addEBookForm.id"
      >
        <el-input
          v-model="addEBookForm.content"
          autocomplete="off"
          ref="name"
          placeholder="请填写期刊介绍"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="是否有效"
        :label-width="formLabelWidth"
        prop="isEffect"
        v-if="addEBookForm.id"
      >
        <el-input
          v-model="addEBookForm.isEffect"
          autocomplete="off"
          ref="name"
          placeholder="请填写是否有效"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="封面图片"
        :label-width="formLabelWidth"
        prop="imageUrl"
      >
        <el-input
          v-model="addEBookForm.imageUrl"
          autocomplete="off"
          ref="name"
          placeholder="请填写封面图片"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="权重"
        :label-width="formLabelWidth"
        prop="sortNum"
        v-if="addEBookForm.id"
      >
        <el-input
          v-model="addEBookForm.sortNum"
          autocomplete="off"
          ref="name"
          placeholder="请填写权重"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddEBook",
  components: { ElForm, ElMessage },
  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      typeList: [],
      addEBookForm: {
        code: "",
        title: "",
        typeId: "",
        press: "",
        author: "",
        content: "",
        isEffect: "",
        imageUrl: "",
        sortNum: "",
      },
      // 校验规则
      addEBookrules: {
        // code: vxRule(true, null, "blur"),
        title: vxRule(true, null, "blur"),
        // press: vxRule(true, null, "blur"),
        // author: vxRule(true, null, "blur"),
        imageUrl: vxRule(true, null, "blur"),
        typeId: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getEBookById(id) {
      httpService("/javaApi/eBook/queryById", { id: id }, "get").then(
        (data) => {
          this.addEBookForm = data;
        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.addEBookForm.id = "";
      this.addEBookForm.code = "";
      this.addEBookForm.title = "";
      this.addEBookForm.typeId = "";
      this.addEBookForm.press = "";
      this.addEBookForm.author = "";
      this.addEBookForm.content = "";
      this.addEBookForm.isEffect = "";
      this.addEBookForm.imageUrl = "";
      this.addEBookForm.sortNum = "";
    },

    save() {
      this.$refs.addEBookRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("code", this.addEBookForm.code);
          params.append("title", this.addEBookForm.title);
          params.append("typeId", this.addEBookForm.typeId);
          params.append("press", this.addEBookForm.press);
          params.append("author", this.addEBookForm.author);
          params.append("content", this.addEBookForm.content);
          params.append("isEffect", this.addEBookForm.isEffect);
          params.append("imageUrl", this.addEBookForm.imageUrl);
          params.append("sortNum", this.addEBookForm.sortNum);
          if (this.addEBookForm.id) {
            params.append("id", this.addEBookForm.id);
            httpService("/javaApi/eBook/edit", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.clear();
                //刷新父组件的数据
                this.$parent.getEBookList();
              } else {
                ElMessage.error(data.message);
              }
            });
          } else {
            httpService("/javaApi/eBook/add", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.clear();
                //刷新父组件的数据
                this.$parent.getEBookList();
              } else {
                ElMessage.error(data.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
</style>